<style lang="scss" scoped>

  .my-project{
    width:100%;
    height: auto;
    float: left;
  }

  .project-banner{
    width:100%;
    height: 120px;
    padding-top: 40px;
    background: #e7eaf0;
    /*line-height: 120px;*/
  }


  .clearfix{
    clear: both;
  }

  .icon-base{
    width:15px;
    height: 15px;
    display: inline-block;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
  }

  .icon-query{
    @extend  .icon-base;

    background-image: url("../../../assets/images/icon-query.png");
  }

  .icon-add-project{
    @extend  .icon-base;
    background-image: url("../../../assets/images/add-project.png");
  }

  .project-footer{
    clear: both;
    float: left;
    width:100%;
    height: auto;
    text-align: center;
    padding: 20px 0;
  }

  .select-pagesize{
    width: 100px;
    background: red;
    display: inline-block;
    margin-left: 30px;
    height: 40px;
  }



</style>

<template>
    <div class="my-project">
      <div class="project-banner">
        <el-col :span="3" style="margin:0 20px">
            <el-input placeholder="项目编号" v-model="projectId"></el-input>
        </el-col>
        <el-col :span="3" style="margin:0 20px">
          <el-input placeholder="项目名称" v-model="projectName"></el-input>
        </el-col>
        <el-col :span="3" style="margin:0 20px">
          <el-select v-model="projectType">
            <el-option  v-for="item in options" :key="item.value" :label="item.key" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="margin: 0 20px;float: right">
          <el-button type="success"  style="opacity: 0;">
            <span class="icon-query"></span> 查询项目
          </el-button>
          <el-button type="success" @click="addProject">
            <span class="icon-add-project"></span>
            新建项目
          </el-button>
        </el-col>
      </div>
      <el-table :data="project" style="width: 100%;">
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="project_num" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="project_name" label="项目名称" align="center">
        </el-table-column>
        <el-table-column prop="project_type" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="status" label="下达状态" align="center" :formatter="getStatus">
        </el-table-column>
        <el-table-column prop="sction_name" label="项目地址" align="center">
        </el-table-column>
        <el-table-column prop="project_manager" label="责任部门" align="center">
        </el-table-column>
        <el-table-column prop="id" label="操作" width="200px" align="center">
          <template scope="scope">
            <el-button type="default" size="small" @click="view(scope.row.id)" style="cursor: pointer;user-select: none;">查看</el-button>
            <el-button type="default" size="small" @click="modify(scope.row.id)" style="cursor: pointer;user-select: none;">修改</el-button>
            <!--<el-button type="default"  size="small" @click="delete(scope.row.id)" style="cursor: pointer;user-select: none;">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="project-footer">
        <el-pagination :page-sizes="[5, 10, 25,50,100]"
                       :page-size="10" layout="sizes,prev, pager, next"
          :total="project.length">
        </el-pagination>
      </div>
      <div class="clearfix"></div>
    </div>
</template>

<script>

  import { Col, Select,Input,Button,Option,Table,TableColumn,Pagination } from "element-ui";

  import { mapState} from 'vuex';

  /**
   * PROJECT_STATUS 是项目的状态
   */
  import { PROJECT_TYPE,PROJECT_STATUS } from "@/conf/options";

  export default {
    name:"ResponsibilityProject",
    components:{
      'ElCol':Col,
      "ElSelect":Select,
      "ElInput":Input,
      "ElButton":Button,
      "ElOption":Option,
      'ElTable':Table,
      'ElTableColumn':TableColumn,
      'ElPagination':Pagination
    },
    computed:mapState({
      user:state=>state.user.userData
    }),
    created(){

      this.$store.dispatch('getProjects').then((res)=>{

        if (res.status==200&&res.statusText=="OK"){
          this.project = res.data;
        }

      },(response)=>{

        this.$message('数据获取失败!');

      }).catch((err)=>{

        console.log(err);

        this.$message('系统错误，获取数据获取失败!');

      });

      var tempArr=JSON.parse(JSON.stringify(PROJECT_TYPE));

      tempArr.splice(0,1);

      this.options = tempArr;

    },
    data(){
      return {
        projectId:"",
        projectName:"",
        projectType:'道路工程',
        options:[],
        project:[]
      };
    },
    methods:{
      /**
       * 查看项目
       * @param pId 项目ID
       */
      view(pId){

        this.$router.push({name:"ViewProjectDetail",params:{ pId }});

      },
      getStatus(row,column,cell){

        var temp=PROJECT_STATUS;

        for (var i=0;i<temp.length;i++){

          for (var j=0;j<temp[i].range.length;j++){

            if (temp[i].range[j]==cell){
              return temp[i].value;
            }

          }
        }

        return '未知状态';
      },
      queryProject(){
        alert('查询项目');
      },
      addProject(){

        this.$router.push({name:"AddProject"});

      },
      modify(id){

        this.$router.push({name:"ModifyProject",params:{ id }});

      }
    }
  }

</script>
